<template>
	<view>
		<view>
			<u-search placeholder="请输入关键字" v-model="searchText" @clear="clearText" @search="search" @custom="search"
				:animation="true">
			</u-search>

			<u-swipe-action>
				<u-swipe-action-item :options="item.options" v-for="(item,index) in lostList" :key="item.id"
					@click="handleClick" :name="index">

					<text></text>
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="swipe-action__content__text"><rich-text
									:nodes="'失物招领标题：'+item.title"></rich-text></view>
							<view class="swipe-action__content__descripText"><rich-text
									:nodes="'失物招领内容：'+item.descrip"></rich-text></view>
							<view class="swipe-action__content__text">发布时间：{{item.createTime}}</view>
							<view class="swipe-action__content__text">找回状态：{{item.status===0?'未认领找回':'已认领找回'}}</u-tag>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				lostList: [],
				userInfo: {
					'id': '1783030882255691777'
				},
				myOptions: [{
						text: '详情',
						style: {
							backgroundColor: '#82848a',
						},
					},
					{
						text: '修改',
						style: {
							backgroundColor: '#2b85e4',
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c',
						},
					},
				],
				options: [{
					text: '详情',
					style: {
						backgroundColor: '#82848a',
					},
				}]

			};
		},
		onLoad() {
			this.getAllLost()
		},
		methods: {
			async delete(id) {
				let {
					data: res
				} = await uni.$http.delete('/user/lost/' + id)
				return res
			},
			loadOptions(lostList) {
				if (!Array.isArray(lostList)) {
					return
				}
				return lostList.map((val, idx) => {
					if (lostList[idx].userId === this.userInfo.id) {
						lostList[idx].options = this.myOptions
					} else {
						lostList[idx].options = this.options
					}
				})
			},
			async getAllLost() {
				let {
					data: res
				} = await uni.$http.get('/user/lost/1/10')
				if (res.code === 20000) {
					this.lostList = res.data.records
					this.loadOptions(this.lostList)
				} else {
					uni.$showMsg(res.msg)
				}
			},
			async search() {
				let {
					data: res
				} = await uni.$http.get('/user/lost/1/10', {
					'searchText': this.searchText,
				})
				if (res.code === 20000) {
					this.lostList = res.data.records
					this.loadOptions(this.lostList)
				} else {
					uni.$showMsg(res.msg)
				}
			},
			clearText() {
				this.getAllLost()
			},
			ToAddLost() {
				uni.navigateTo({
					url: '/pages/lost/lost'
				})
			},
			handleClick(options) {
				console.log(options);
				// 详情按钮
				if (options.index === 0) {
					uni.navigateTo({
						url: "/pages/lost/lost?type=detail&id=" + this.lostList[parseInt(options.name)].id
					})
					return
				}

				// 修改按钮
				if (options.index === 1) {
					uni.navigateTo({
						url: '/pages/lost/lost?id=' + this.lostList[parseInt(options.name)].id
					})
					return
				}
				// 删除按钮
				if (options.index === 2) {
					uni.showModal({
						title: '删除失物招领',
						content: '您确定要删除这条失物招领吗？',
						success: (action) => {
							if (action.confirm) {
								this.delete(this.lostList[parseInt(options.name)].id).then(res => {
									if (res.code === 20000) {
										this.getAllLost()
										uni.$showMsg('删除成功！祝世上再无失物！')
									} else {
										uni.$showMsg(res.msg)
									}
								})
							} else if (action.cancel) {
								uni.$showMsg('成功取消删除，愿失物早日被召回找回')
							}
						}
					})
					return
				}
			},
		},
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__descripText {
				width: 90%;
				word-break: keep-all;
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
</style>